import {defineStore} from "pinia";
import config from "@/config";
import router from "@/router";
import {store} from "@/store";
import storage from "@/utils/storage";
import tree from "@/utils/tree";
import colorTool from "@/utils/color";

export const useGlobalStore = defineStore({
    id: "jcx-global-store",
    state: () => ({
        // 是否移动端
        isMobile: false,
        // 系统名称
        appName: storage.data.get("APP_NAME") || config.APP_NAME,
        // 系统版本
        appVersion: storage.data.get("APP_VERSION") || config.APP_VERSION,
        // 系统布局
        appLayout: storage.data.get("APP_LAYOUT") || config.APP_LAYOUT,
        // 系统语言
        appLang: storage.data.get("APP_LANG") || config.APP_LANG,
        // 系统主题色
        appColor: storage.data.get('APP_COLOR') || config.APP_COLOR || '#409EFF',
        // 是否暗黑模式
        appDark: storage.data.get("APP_DARK") || false,
        // 菜单是否折叠
        menuIsCollapse: storage.data.get("APP_MENU_IS_COLLAPSE") || config.MENU_IS_COLLAPSE,
        // 菜单是否启用手风琴效果
        menuUniqueOpened: storage.data.get("APP_MENU_UNIQUE_OPENED") || config.MENU_UNIQUE_OPENED,
        // 是否开启多标签
        layoutTags: storage.data.get("APP_LAYOUT_TAGS") || config.LAYOUT_TAGS,
        // 标签圆角
        tagsRadius: storage.data.get("APP_TAGS_RADIUS") || config.TAGS_RADIUS,
        // 是否开启多标签缓存
        layoutSaveTags: storage.data.get("APP_LAYOUT_SAVE_TAGS") || config.LAYOUT_SAVE_TAGS,
        // 面包屑列表
        breadCrumbList: [],
        // 菜单列表
        menuList: storage.data.get("APP_MENU_LIST") || [],
        // 搜索历史列表
        searchHistoryList: storage.data.get("APP_SEARCH_HISTORY_LIST") || [],
        // 标签列表
        viewTags: storage.data.get("APP_VIEW_TAGS") || [],
        routeShow: true,
        keepLiveRoute: storage.data.get("APP_KEEP_LIVE_ROUTES") || [],
    }),
    getters: {
        getIsMobile() {
            return this.isMobile;
        },
        getAppName() {
            return this.appName;
        },
        getAppVersion() {
            return this.appVersion;
        },
        getAppLayout() {
            return this.appLayout;
        },
        getAppLang() {
            return this.appLang;
        },
        getAppColor() {
            return this.appColor;
        },
        getAppDark() {
            return this.appDark;
        },
        getMenuIsCollapse() {
            return this.menuIsCollapse;
        },
        getMenuUniqueOpened() {
            return this.menuUniqueOpened;
        },
        getLayoutTags() {
            return this.layoutTags;
        },
        getLayoutSaveTags() {
            return this.layoutSaveTags;
        },
        getBreadCrumbList() {
            return this.breadCrumbList;
        },
        getMenuList() {
            return tree.treeFilter(this.menuList, (menu) => !menu.meta.hidden && menu.meta.category !== "BUTTON");
        },
        getSearchHistoryList() {
            return this.searchHistoryList;
        },
        getViewTags() {
            return this.viewTags;
        },
        getTagsRadius() {
            return this.tagsRadius;
        },
        getRouteShow() {
            return this.routeShow;
        },
        getKeepLiveRoute() {
            return this.keepLiveRoute;
        },
    },
    actions: {
        setIsMobile(isMobile) {
            this.isMobile = isMobile;
        },
        setAppName(appName) {
            this.appName = appName;
        },
        setAppVersion(appVersion) {
            this.appVersion = appVersion;
        },
        setAppLayout(appLayout) {
            this.appLayout = appLayout;
            storage.data.set("APP_LAYOUT", this.appLayout);
            document.body.setAttribute("data-layout", this.layout);
        },
        setAppLang(appLang) {
            this.appLang = appLang;
            storage.data.set("APP_LANG", this.appLang);
        },
        setAppColor(appColor) {
            this.appColor = appColor;
            storage.data.set('APP_COLOR', this.appColor);
            document.documentElement.style.setProperty('--el-color-primary', this.appColor);
            for (let i = 1; i <= 9; i++) {
                document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(this.appColor, i / 10));
            }
            for (let i = 1; i <= 9; i++) {
                document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(this.appColor, i / 10));
            }
        },
        setAppDark(appDark) {
            this.appDark = appDark;
            storage.data.set("APP_DARK", this.appDark);
            if (this.appDark) {
                document.documentElement.classList.add("dark");
            } else {
                document.documentElement.classList.remove("dark");
            }
        },
        setMenuIsCollapse(menuIsCollapse) {
            this.menuIsCollapse = menuIsCollapse;
            storage.data.set("APP_MENU_IS_COLLAPSE", this.menuIsCollapse);
        },
        toggleMenuIsCollapse() {
            this.menuIsCollapse === 'Y' ? this.menuIsCollapse = "N" : this.menuIsCollapse = "Y";
            storage.data.set("APP_MENU_IS_COLLAPSE", this.menuIsCollapse);
        },
        setMenuUniqueOpened(menuUniqueOpened) {
            this.menuUniqueOpened = menuUniqueOpened;
            storage.data.set("APP_MENU_UNIQUE_OPENED", this.menuUniqueOpened);
        },
        toggleMenuUniqueOpened() {
            this.menuUniqueOpened === 'Y' ? this.menuUniqueOpened = "N" : this.menuUniqueOpened = "Y";
            storage.data.set("APP_MENU_UNIQUE_OPENED", this.menuUniqueOpened);
        },
        toggleLayoutTags() {
            this.layoutTags === 'Y' ? this.layoutTags = "N" : this.layoutTags = "Y";
            storage.data.set("APP_LAYOUT_TAGS", this.layoutTags);
        },
        toggleTagsRadius() {
            this.tagsRadius === 'Y' ? this.tagsRadius = "N" : this.tagsRadius = "Y";
            storage.data.set("APP_TAGS_RADIUS", this.tagsRadius);
        },
        setLayoutSaveTags(layoutSaveTags) {
            this.layoutSaveTags = layoutSaveTags;
            storage.data.set("APP_LAYOUT_SAVE_TAGS", this.layoutSaveTags);
        },
        toggleLayoutSaveTags() {
            this.layoutSaveTags === 'Y' ? this.layoutSaveTags = "N" : this.layoutSaveTags = "Y";
            storage.data.set("APP_LAYOUT_SAVE_TAGS", this.layoutSaveTags);
            if (this.layoutSaveTags === "Y") {
                storage.data.set("APP_VIEW_TAGS", this.viewTags);
            } else {
                storage.data.remove("APP_VIEW_TAGS");
            }
        },
        setBreadCrumbList(breadCrumbList) {
            this.breadCrumbList = breadCrumbList;
        },
        setMenuList(menuList) {
            const homeMenu = {
                name: 'home',
                path: '/home',
                meta: {
                    title: '首页',
                    icon: 'el-icon-home-filled',
                    type: 'DIRECTORY'
                },
                children: [{
                    name: 'dashboard',
                    path: config.DASHBOARD_URL,
                    component: config.DASHBOARD_COMPONENT,
                    meta: {
                        title: '控制台',
                        icon: 'el-icon-menu',
                        tree: 'MENU',
                        affix: true
                    },
                }]
            };
            this.menuList = [homeMenu, ...menuList];
            storage.data.set("APP_MENU_LIST", this.menuList);
        },
        setSearchHistoryList(searchHistoryList) {
            this.searchHistoryList = searchHistoryList;
            storage.data.set("APP_SEARCH_HISTORY_LIST", this.searchHistoryList);
        },
        pushViewTags(route) {
            let backPathIndex = this.viewTags.findIndex(item => item.fullPath === router.options.history.state.back);
            let target = this.viewTags.find((item) => item.fullPath === route.fullPath);
            let isName = route.name;
            if (!target && isName) {
                if (backPathIndex === -1) {
                    this.viewTags.push(route);
                } else {
                    this.viewTags.splice(backPathIndex + 1, 0, route);
                }
                if (this.layoutSaveTags === "Y") {
                    storage.data.set("APP_VIEW_TAGS", this.viewTags);
                }
            }
        },
        removeViewTags(route) {
            this.viewTags.forEach((item, index) => {
                if (item.fullPath === route.fullPath) {
                    this.viewTags.splice(index, 1);
                    if (this.layoutSaveTags === "Y") {
                        storage.data.set("APP_VIEW_TAGS", this.viewTags);
                    }
                }
            })
        },
        updateViewTags(route) {
            this.viewTags.forEach((item) => {
                if (item.fullPath === route.fullPath) {
                    Object.assign(item, route);
                    if (this.layoutSaveTags === "Y") {
                        storage.data.set("APP_VIEW_TAGS", this.viewTags);
                    }
                }
            })
        },
        updateViewTagsTitle(title = '') {
            const nowFullPath = location.hash.substring(1);
            this.viewTags.forEach((item) => {
                if (item.fullPath === nowFullPath) {
                    item.meta.title = title;
                    if (this.layoutSaveTags === "Y") {
                        storage.data.set("APP_VIEW_TAGS", this.viewTags);
                    }
                }
            })
        },
        clearViewTags() {
            this.viewTags = [];
            if (this.layoutSaveTags === "Y") {
                storage.data.remove("APP_VIEW_TAGS");
            }
        },
        pushKeepLive(component) {
            if (!this.keepLiveRoute.includes(component)) {
                this.keepLiveRoute.push(component);
                storage.data.set("APP_KEEP_LIVE_ROUTES", this.keepLiveRoute);
            }
        },
        removeKeepLive(component) {
            const index = this.keepLiveRoute.indexOf(component);
            if (index !== -1) {
                this.keepLiveRoute.splice(index, 1);
                storage.data.set("APP_KEEP_LIVE_ROUTES", this.keepLiveRoute);
            }
        },
        clearKeepLive() {
            this.keepLiveRoute = []
            storage.data.remove("APP_KEEP_LIVE_ROUTES");
        },
        setRouteShow(key) {
            this.routeShow = key
        }
    }
});

export function useGlobalStoreHook() {
    return useGlobalStore(store);
}
